<template>
    <div>
        <page-view>
            <template #option>
                <div class="btn-box">
                    <el-button type="primary" :loading="importLoading" @click="importDictTree">导入</el-button>
                    <el-button type="primary" @click="showAddFrom">新增</el-button>
                </div>
            </template>
            <template #table="tableScope">
              <PubilcTable ref="lazyRef" :isLazy="isLazy" :tableHeight="tableScope.tableHeight" :getLazyCild="getLazyCild" :table-data="tableData"
                :list-config="columns" :page-data="pageData" :actionLimit="actionLimit" @on-action="onAction" />
            </template>
        </page-view>
        <eForm :dialog-visible="dialogVisible" :isAdd="isAdd" :formData="formData" @on-submit="formSubmit"
            @handle-close="handleClose" />
        <importForm :dialog-visible="dialogVisible2" :downLoading='downLoading' :showDown="true"
            :acceptOption='acceptOption' @on-submit="formSubmit2" @downFile="downFile" @handle-close="handleClose" />
    </div>
</template>
<script  setup name="sortManagement">
import { reactive, ref } from 'vue'
import eForm from './components/addForm.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import api from '@/api/index'
import { downloadFile } from '@/util/downFile'

const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const acceptOption = ref('.xls,.xlsx')
const importLoading = ref(false)
const isAdd = ref('add')
const formData = ref({})
const isLazy = ref(true)
const lazyRef = ref(null)
const downLoading = ref(false)

const pageData = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const OPERTATE = [
    { alias: 'edit', label: '编辑' },
    { alias: 'del', label: '删除' },
    { alias: 'addChild', label: '添加下级' },
]
const tableData = ref([])

const columns = [
    { alias: 'dictName', label: '分类名称' },
    { alias: 'dictCode', label: '分类编号' },
    { label: '操作', listArr: OPERTATE, width: '180px', fixed: 'right', type: 'action' }
]

onMounted(()=>{
    onSearch()
})

const onSearch = () => {
    const params = {...pageData.value}
    api.dataMaintenance.getTreeDictsList(params).then((res)=>{
            tableData.value = res.list || []
            pageData.value.total = res.total
    })
}

const editRow = (row) => {
    api.dataMaintenance.getTreeDictsById(row.id).then((res)=>{
        formData.value = res || {}
        isAdd.value = 'edit'
        dialogVisible.value = true
    })
}

const deleteRow = (row) => {
    ElMessageBox.confirm('确定删除此分类吗？删除后将不可恢复。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        const params = {
            ids: row.id
        }
        api.dataMaintenance.deleteTreeDicts(params).then((res)=>{
                ElMessage({
                    type: 'success',
                    message: '删除成功!'
                });
                tableData.value = []
                onSearch()
                lazyRef.value.resetLazyTree(row)
        })
    })
}

const addChild = (val)=>{
    formData.value = val
    isAdd.value = 'addChild'
    dialogVisible.value = true
}

const onAction = ([item, row]) => {
    const obj = {
        'del': deleteRow,
        'edit': editRow,
        'addChild': addChild,
        'pageNum': onSearch,
        'pageSize': onSearch
    }
    if (typeof item === 'string') {
        pageData.value[item] = row
        if (item === 'pageSize') pageData.value.pageNum = 1
        obj[item]()
    } else {
        obj[item.alias](row)
    }
}

const showAddFrom = () => {
    formData.value = {}
    isAdd.value = 'add'
    dialogVisible.value = true
}
const formSubmit = (val)=>{
    const params = {...val}
    if(params.id){
        api.dataMaintenance.editTreeDicts(params).then((res)=>{
            ElMessage({
                type: 'success',
                message: '修改成功!'
            });
            dialogVisible.value = false
            tableData.value = []
            onSearch()
        })
    }else{
        api.dataMaintenance.addTreeDict(params).then((res)=>{
            ElMessage({
                type: 'success',
                message: '新增成功!'
            });
            dialogVisible.value = false
            tableData.value = []
            onSearch()
        })
    }
}

const formSubmit2 = (val)=>{
    if(val && val.file){
        let fd = new FormData()
        fd.append('file', val.file)
        api.dataMaintenance.excelTreeDicts(fd).then((res)=>{
            if(res){
                window.open(res);
                ElMessage({
                    type: 'error',
                    message: '导入失败!'
                });
                importLoading.value = false
                onSearch()
            }else{
                ElMessage({
                    type: 'success',
                    message: '导入成功!'
                });
                importLoading.value = false
                onSearch()
            }
        })
    }else{
        return
    }
}

const handleClose = val => {
    dialogVisible.value = val
    dialogVisible2.value = val
    importLoading.value = false
}

const getLazyCild = api.dataMaintenance.getTreeDictsClid

const actionLimit = ([item, row]) => {
    return false
}

// 下载导入模板
const downFile = ()=>{
    downLoading.value = true
    api.publicApi.downFile('treedicts').then((res)=>{
        if(res && res.url){
            window.open(res.url);
            ElMessage({
                type: 'success',
                message: '导出成功!'
            });
            downLoading.value = false
        }else{
            ElMessage({
                type: 'error',
                message: '导出失败!'
            });
            downLoading.value = false
        }
    })
}

const importDictTree = () => {
    importLoading.value = true
    dialogVisible2.value = true
}
</script>

<style lang="scss" scoped>

</style>
